import {uSelectWebMoreDevStatusPandect} from '@/api/dataOverview'
import {CCard} from '@/components/card'
import {CItem} from '@/components/item'
import RollerDigital from '@/components/rollerDigital'
import {CnMediumP, CnNormalSpan} from '@/components/text'
import WaterTarget from '@/components/waterTarget'
import useLoading from '@/hooks/loading'
import {getUserId} from '@/libs/auth'
import {ratio2color} from '@/libs/text2Color'

const DevOverviewCardLayout = defineComponent({
  props: {
    loading: Boolean
  },
  setup(props, {slots}) {
    return () => (
      <CCard
        id='CBC-DevOverviewCard'
        title='设备总览'
        class='col-span-1 w-full h-280 rounded-4 bg-white overflow-hidden'
        loading={props.loading}
        skeletonProps={{paragraph: {rows: 6}}}
      >
        <div class='w-full h-full flex flex-col'>{slots.default?.()}</div>
      </CCard>
    )
  }
})

export const DevOverviewCard = defineComponent({
  setup(props, ctx) {
    const {startLoading, closeLoading, loading, isSuccess} = useLoading()

    const state = reactive<{
      devOverview: DataOverview.DevOverview | null
    }>({
      devOverview: null
    })

    function getDevOverview() {
      const userId = getUserId()
      if (!userId) return
      startLoading()
      uSelectWebMoreDevStatusPandect({userId})
        .then(res => {
          state.devOverview = res.data
          closeLoading(true)
        })
        .catch(err => {
          closeLoading(false)
        })
    }

    onMounted(() => {
      getDevOverview()
    })

    return () =>
      loading.value ? (
        <DevOverviewCardLoading></DevOverviewCardLoading>
      ) : isSuccess.value ? (
        <DevOverviewCardLayout>
          <div class='h-92 flex items-center mt-18 mb-16'>
            <WaterTarget
              id='onlineAllTarget'
              radius={46}
              range={(parseInt(state.devOverview?.onlineTimePack.countRatio || '0') / 100) * 360}
              borderWidth={7}
              borderColor={ratio2color(
                parseInt(state.devOverview?.onlineTimePack.countRatio || '0')
              )}
              fontColor={'#19AD54'}
              tooltipTitle={'在线时长占比'}
            >
              <RollerDigital
                class='text-24'
                endVal={parseInt(state.devOverview?.onlineTimePack.countRatio || '0') || 0}
                bold={false}
                style={{
                  color: ratio2color(parseInt(state.devOverview?.onlineTimePack.countRatio || '0'))
                }}
              ></RollerDigital>
            </WaterTarget>

            <div class='flex-1 ml-24'>
              <CnMediumP class='text-24'>{state.devOverview?.devOnlineStatus || '---'}</CnMediumP>
              <div>
                <CnNormalSpan>工作时长</CnNormalSpan>
                <span class=' mx-6'>
                  <RollerDigital
                    class='text-16 text-text'
                    endVal={state.devOverview?.workTimePack.countTime}
                  ></RollerDigital>
                </span>
                <CnNormalSpan>{state.devOverview?.workTimePack.countUnit}</CnNormalSpan>
              </div>
              <div>
                <CnNormalSpan>离线次数</CnNormalSpan>
                <span class='text-text mx-6'>
                  <RollerDigital
                    class='text-12 text-danger'
                    endVal={state.devOverview?.devOfflineCount}
                  ></RollerDigital>
                </span>
                <CnNormalSpan>次</CnNormalSpan>
              </div>
            </div>
          </div>
          <div class='w-full h-0 border-b-1 border-splitLine'></div>
          <div class='mt-13'>
            <div class='py-7'>
              <div class='h-full flex items-center'>
                <WaterTarget
                  id='onlineTarget'
                  borderColor={'#19AD54'}
                  range={
                    (parseInt(state.devOverview?.onlineTimePack.countRatio || '0') / 100) * 360
                  }
                  showDashed={false}
                  borderWidth={2}
                  radius={14}
                  tooltipTitle={'在线时长占比'}
                >
                  <RollerDigital
                    class={['text-12 text-success']}
                    endVal={parseInt(state.devOverview?.onlineTimePack.countRatio || '0')}
                    bold={false}
                  ></RollerDigital>
                </WaterTarget>
                <div class='ml-10'>
                  <CnNormalSpan>设备在线时长</CnNormalSpan>
                  <CnNormalSpan class={['mx-6']}>
                    <RollerDigital
                      class={['text-success']}
                      endVal={state.devOverview?.onlineTimePack.countTime}
                      bold={false}
                    ></RollerDigital>
                    <CnNormalSpan class='ml-8 text-12'>
                      {state.devOverview?.onlineTimePack.countUnit}
                    </CnNormalSpan>
                  </CnNormalSpan>
                </div>
              </div>
            </div>

            <div class='py-7'>
              <div class='h-full flex items-center'>
                <WaterTarget
                  id='offlineTarget'
                  borderColor={'#F25656'}
                  radius={14}
                  range={
                    (parseInt(state.devOverview?.offLineTimePack.countRatio || '0') / 100) * 360
                  }
                  showDashed={false}
                  borderWidth={2}
                  tooltipTitle={'离线时长占比'}
                >
                  <RollerDigital
                    class={['text-12 text-danger']}
                    endVal={parseInt(state.devOverview?.offLineTimePack.countRatio || '0')}
                    bold={false}
                  ></RollerDigital>
                </WaterTarget>

                <div class='ml-10'>
                  <CnNormalSpan>设备离线时长</CnNormalSpan>
                  <CnNormalSpan class={['mx-6']}>
                    <RollerDigital
                      class={['text-danger']}
                      endVal={state.devOverview?.offLineTimePack.countTime || 0}
                      bold={false}
                    ></RollerDigital>
                    <CnNormalSpan class='ml-8 text-12'>
                      {state.devOverview?.offLineTimePack.countUnit}
                    </CnNormalSpan>
                  </CnNormalSpan>
                </div>
              </div>
            </div>
          </div>
        </DevOverviewCardLayout>
      ) : (
        <DevOverviewCardEmpty></DevOverviewCardEmpty>
      )
  }
})

export const DevOverviewCardEmpty = defineComponent({
  setup() {
    return () => (
      <DevOverviewCardLayout>
        <div class='w-full h-full flex items-center justify-center'>
          <a-empty description='数据获取失败' />
        </div>
      </DevOverviewCardLayout>
    )
  }
})
export const DevOverviewCardLoading = defineComponent({
  setup() {
    return () => <DevOverviewCardLayout loading={true}></DevOverviewCardLayout>
  }
})
